<template>
  <div class="date-picker">
    <input type="date" :value="localDateValue" @change="handleDateChange">
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';

// 定义 props 接收外部传入的日期值
const props = defineProps({
  modelValue: String
});

// 定义 emits 用于向父组件发送更新事件
const emits = defineEmits(['update:modelValue']);

// 内部存储日期值
const localDateValue = ref(props.modelValue);

const handleDateChange = (e) => {
  localDateValue.value = e.target.value;
  // const parts = localDateValue.value.split('-');
  // // 提取年、月、日信息
  // const year = parts[0];
  // const month = parts[1];
  // const day = parts[2];
  // 向父组件发送更新事件
  emits('update:modelValue', localDateValue.value);
};

// 监听 props.modelValue 的变化，更新内部存储的值
watch(() => props.modelValue, (newValue) => {
  localDateValue.value = newValue;
});
</script>

<style scoped>
.date-picker input {
  padding: 5px;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box
}
</style>